<template>
  <div style="width: calc(100vw - 250px); padding: 10px">
    <el-table :data="props.dataList.records" style="width: 100%" height="380">
      <el-table-column prop="id" label="编号" width="100" />
      <el-table-column prop="userId" label="用户" fixed />
      <el-table-column prop="content" label="内容" show-overflow-tooltip width="500" />
      <el-table-column label="时间" width="200">
        <template #default="scope">
          <div>{{ titleUtil.formatDate(scope.row.createTime) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template #default="scope">
          <el-tag size="small" :type="statusType(scope.row.status)">{{
            statusName(scope.row.status)
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="290">
        <template #default="scope">
          <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
          <el-button
            size="small"
            type="success"
            v-if="props.type === 3 ? false : true"
            @click="pass(scope.row.id, scope.row.userId)"
            >通过</el-button
          >
          <el-button
            size="small"
            type="primary"
            v-if="props.type === 3 ? false : true"
            @click="noPass(scope.row.id, scope.row.userId)"
            >不通过</el-button
          >
          <el-button
            size="small"
            type="warning"
            @click="reExamine(scope.row.id, scope.row.userId, scope.row.status)"
            v-if="props.type === 2 ? false : true"
            >重申</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-pagination
    background
    layout="prev, pager, next"
    :total="props.dataList.total"
    :page-size="props.dataList.size"
    :page-count="props.dataList.pages"
    :current-page="currentPage"
    small
    :hide-on-single-page="true"
    @current-change="handlerChange"
  />
</template>

<script setup>
import titleUtil from '@/util/titleUtil'
import { ElNotification } from 'element-plus'
import { ref } from 'vue'

const props = defineProps({
  dataList: {
    type: Object,
    default: () => {}
  },
  type: {
    type: Number,
    default: 1
  }
})
const currentPage = ref(1)
const emits = defineEmits(['reexamine', 'delete', 'change-page', 'pass', 'nopass'])

const handlerChange = (val) => {
  console.log(val)
  currentPage.value = val
  emits('change-page', val)
}

const reExamine = (id, userId, status) => {
  if (status === 0) {
    ElNotification.warning('抱歉，该消息还没有审核')
    return
  }
  emits('reexamine', id, userId)
}

const noPass = (id, userId) => {
  emits('nopass', id, userId)
}
const pass = (id, userId) => {
  emits('pass', id, userId)
}

const del = (id) => {
  emits('delete', id)
}

const statusName = (status) => {
  if (status === 0) {
    return '审核中'
  } else if (status === 1) {
    return '已发布'
  } else if (status === 2) {
    return '未通过'
  }
}
const statusType = (status) => {
  if (status === 0) {
    return 'warning'
  } else if (status === 1) {
    return 'success'
  } else if (status === 2) {
    return 'danger'
  }
}
</script>

<style></style>
